<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>Scheduler</title>
 
   <script type="text/javascript" src="../view/jquery.min.js"></script>

 
 
   <script type="text/javascript">
      $(document).ready(function () {
    	  
    	 window["images"]=0;
         initialize("canvas1","_DAY1_");
 		 initialize("canvas2","_DAY2_");
         initialize("canvas3","_DAY3_");
         initialize("canvas4","_DAY4_");
         initialize("canvas5","_DAY5_");
         initialize("canvas6","_DAY6_");
         initialize("canvas7","_DAY7_");
          
         setTimeout(drawLines, 500)
          
      });
 

      function drawLines()
      {
          var allDataJson = '_ALL_DATA_JSON_';
          var allDataJS = JSON.parse(allDataJson);
          
			// through all days
          for (dayNumber = 1; dayNumber <= allDataJS.length; dayNumber++) {
        	  // get references to the canvas element as well as the 2D drawing context
              var sigCanvas = document.getElementById("canvas"+dayNumber);
              var context = sigCanvas.getContext("2d");
              context.c
              context.strokeStyle = 'Blue';
        
              
    		  
        	  //through day data
        	  var dayDataJS = JSON.parse(allDataJS[dayNumber-1]);
              
              context.beginPath();
			  context.moveTo(deNormalizeX(0), deNormalizeY(dayDataJS[0]));
			  
        	  for(i = 0; i<dayDataJS.length;i++)
        		  {
        		  	context.lineTo(deNormalizeX(i+1),deNormalizeY(dayDataJS[i]));
        		  }
        	  
        	  context.stroke();
        	  
        	}
          
  
    	  
      }
      

      function getXMin()
      {
    	  return 55;
      }
      function getYMin()
      {
    	  return 22;
      }
      
      function getXMax()
      {
    	  return 444;
      }
      function getYMax()
      {
    	  return 159;
      }
      
      function normalizeX(x)
      {
    	  var retX = 100 * (( x - getXMin() ) / ( getXMax() - getXMin() ));
    	  return retX;
      }
      
      function deNormalizeX(x)
      {
    	  var retX = (x* ( getXMax() - getXMin() ) / 100) + getXMin() ;
    	  return retX;
      }
      
      function normalizeY(y)
      {
    	  var retY = 100 * (( y - getYMin() ) / ( getYMax() - getYMin() ));
    	  return retY;
      }

      function deNormalizeY(y)
      {
    	  var retY = (y* ( getYMax() - getYMin() ) / 100) + getYMin() ;
    	  return retY;
      }
      
      
      function cleanCanvas(canvasName)
      {
    	  var sigCanvas = document.getElementById(canvasName);
          var context = sigCanvas.getContext("2d");
          
       // background
 		 var imageObj = new Image();
 		  imageObj.onload = function() {
 			  
 			  context.drawImage(imageObj, 0, 0);
 			
 			// feel days
 			  context.font = 'italic bold 12pt Times new roman';
 			  context.fillText('Very', 13, 36);
 			  context.fillText('Low',  13, 156);
 			  context.fillText(window[canvasName+"Title"], 215, 16);
 			  window["images"]++;
 			  
 		  };
 		  imageObj.src = '../view/background.png';
 		  
      }
 
      function initialize(canvasName, title) {
         // get references to the canvas element as well as the 2D drawing context
         var sigCanvas = document.getElementById(canvasName);
         var context = sigCanvas.getContext("2d");
         context.c
         context.strokeStyle = 'Blue';
		 
         window[canvasName+"Title"]=title;
         cleanCanvas(canvasName);
 
      }

   </script>
   
</head>
 
 
<body>
   <h1>User preferences</h1>
 

    <canvas id="canvas1" width="445px" height="181px" canvas></canvas><br/>

	<canvas id="canvas2" width="445px" height="181px" canvas></canvas><br/>
	
    <canvas id="canvas3" width="445px" height="181px" canvas></canvas><br/>

	<canvas id="canvas4" width="445px" height="181px" canvas></canvas><br/>
	
    <canvas id="canvas5" width="445px" height="181px" canvas></canvas><br/>

	<canvas id="canvas6" width="445px" height="181px" canvas></canvas><br/>
	
    <canvas id="canvas7" width="445px" height="181px" canvas></canvas><br/>



</body>
</html> 